<template>
  <HeaderTitle title="生产单标签打印状况报表"></HeaderTitle>
  <div class="plsrPage">
    <div class="searchBox">
      <div class="sbTitle">选择条件范围:</div>
      <div class="row searchReqBox items-center">
        <div class="col-12 searchItem">
          <div class="q-gutter-sm">
            <q-radio
              color="purple"
              v-model="param"
              val="printed"
              label="已打标签日期"
            />
            <q-radio
              color="purple"
              v-model="param"
              val="notPrint"
              label="未打标签"
            />
            <q-radio color="purple" v-model="param" val="all" label="全部" />
          </div>
          <!-- <div class="row items-center">
            <div class="q-pa-md">
            <span class="col-4">已打标签日期:</span>
            <input class="col-7" v-model="printedDate" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 searchItem">
          <div class="row items-center">
            <span class="col-4">未打标签:</span>
            <input class="col-7" v-model="notPrintedDate" />
          </div> -->
        </div>
      </div>
      <div class="row searchBtnBox">
        <q-btn color="purple-10" class="searchBtn" @click="search()"
          >搜寻</q-btn
        >
      </div>
    </div>
    <div v-if="showResult" class="resultBox">
      <div class="exportBtnBox">
        <q-btn
          color="blue-10"
          class="exportBtn"
          label="导出"
          @click="exportTable()"
        >
          <q-icon name="fa-solid fa-file-arrow-down" class="exportSVG" />
        </q-btn>
      </div>
      <div class="resultTbBox">
        <q-table
          flat
          bordered
          dense
          separator="cell"
          table-header-class="bg-grey-5"
          :rows="rtrows"
          :columns="rtcolumns"
          row-key="NO"
          class="resultTable"
          :pagination="{ rowsPerPage: 50 }"
        >
          <template v-slot:body-cell-NO="props">
            <q-td :props="props">
              {{ props.rowIndex + 1 + rowsPerPage * ( currentPage - 1) }}
            </q-td>
          </template>

          <template v-slot:header-cell="props">
            <q-th @click="sortByCol(props.col.name)">
              {{ props.col.label }}
              <span v-if="sortCol&&props.col.name==sortCol.replace(/-/g, '')">
                  <q-icon v-if="sortCol[0]=='-'" name="arrow_downward"></q-icon>
                  <q-icon v-if="sortCol[0]!='-'" name="arrow_upward"></q-icon>
              </span>
            </q-th>

          </template>

          <template v-slot:bottom="scope">
            <q-pagination
            style="margin-right: 5px;"
              v-model="currentPage"
              color="primary"
              :max="max"
              :max-pages="6"
              boundary-numbers
              activeDesign="unelevated"
              activeColor="purple"
            />

            <div style="display: flex; align-items: center; gap: 4px">
              <div style="display: flex; align-items: center; gap: 4px">
                <div>每页的行数:</div>
                <div>
                  <q-select
                    dense
                    options-dense
                    borderless
                    optionsCover
                    v-model="scope.pagination.rowsPerPage"
                    :options="[5, 10, 20, 50, 100]"
                    @update:model-value="onchange"
                  />
                </div>
                {{
                  scope.pagination.rowsPerPage * currentPage -
                  scope.pagination.rowsPerPage +
                  1 +
                  " - " +
                  (
                    scope.pagination.rowsPerPage * currentPage <=
                    total
                    ? 
                    scope.pagination.rowsPerPage * currentPage
                    : rtrows.length
                    ) +
                  " of " +
                  total
                }}
              </div>
            </div>
          </template>
        </q-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref , watch} from "vue";
import HeaderTitle from "src/components/HeaderTitle.vue";
import { getPrintLabelStatusReport, exportPrintLabelStatusReport } from "src/services/reportService";
import { Loading, exportFile } from 'quasar'

const param = ref("all");
const showResult = ref(false);
const currentPage = ref(1);
const rowsPerPage = ref(50);
const sortCol = ref(null);
const sortDirection = ref('desc');
const total = ref(0);
const max = ref(1);

// Function: Download Table as xlxs file
const exportTable = async () => {
  console.log("downloading print label file... ");
  try {
    Loading.show()
    const res = await exportPrintLabelStatusReport(
      param.value
    )
    if (res.status==200){
      const filename = param.value + "_label.csv"
      // const filename = res.headers['content-disposition'].split('filename=')[1].replace(/"/g, '');

      const status = exportFile(filename, res.data, {
        encoding: 'utf-8',
        mimeType: 'text/csv;',
        byteOrderMark: '\uFEFF'
      })

      if (status!=true){
        $q.notify({
          message: '导出失败',
          color: 'negative',
          timeout: 2000,
          position: "center",
        })
      }else{
        $q.notify({
          message: '导出成功',
          color: 'positive',
          timeout: 2000,
          position: "center",
        })
      }


    }
  } catch (error) {
    console.log(error);
  }
  Loading.hide()

};

watch(currentPage,(newCurrentPage)=>{
  console.log(currentPage);
  currentPage.value = newCurrentPage
  search()
})

function onchange(val){
  rowsPerPage.value = val
  currentPage.value = 1
  search()
}

function sortByCol(col){
  if (sortCol.value==null){
    sortCol.value = col
  }
  sortCol.value = sortCol.value[0] == '-' ? col: '-' + col
  search()
}

// Search Result Table
const rtcolumns = [
  // {
  //   name: "NO",
  //   required: true,
  //   label: "序号",
  //   align: "left",
  //   field: "NO",
  //   format: (val) => `${val}`,
  //   sortable: true,
  // },
  {
    name: "source",
    align: "center",
    label: "地点",
    field: "source",
    sortable: true,
  },
  {
    name: "fgNum",
    align: "center",
    label: "FGRNUM",
    field: "fgNum",
    sortable: true,
  },
  {
    name: "orderType",
    align: "center",
    label: "ORDERTYPE",
    field: "orderType",
    sortable: true,
  },
  {
    name: "orddate",
    align: "center",
    label: "ORDDATE",
    field: "orddate",
    sortable: true,
  },
  {
    name: "duedat",
    align: "center",
    label: "DUEDAT",
    field: "duedat",
    sortable: true,
  },
  {
    name: "designNum",
    align: "center",
    label: "DESIGN",
    field: "design",
    sortable: true,
  },
  {
    name: "pono",
    align: "center",
    label: "PONO",
    field: "pono",
    sortable: true,
  },
  {
    name: "podesc",
    align: "center",
    label: "PODESC",
    field: "podesc",
    sortable: true,
  },
  {
    name: "typcde",
    align: "center",
    label: "TYPCDE",
    field: "goods_type",
    sortable: true,
  },
  {
    name: "quantity",
    align: "center",
    label: "ORDQTY",
    field: "quantity",
    sortable: true,
  },
  {
    name: "dept1",
    align: "center",
    label: "DEPT1",
    field: "dept1",
    sortable: true,
  },
  {
    name: "dept11",
    align: "center",
    label: "DEPT11",
    field: "dept11",
    sortable: true,
  },
  {
    name: "datfrm1",
    align: "center",
    label: "DATFRM1",
    field: "datfrm1",
    sortable: true,
  },
  {
    name: "gldcde",
    align: "center",
    label: "GLDCDE",
    field: "gldcde",
    sortable: true,
  },
  {
    name: "deptr",
    align: "center",
    label: "DEPTR",
    field: "deptr",
    sortable: true,
  },
  {
    name: "ringType",
    align: "center",
    label: "RING_TYPE",
    field: "ring_type",
    sortable: true,
  },
  {
    name: "productcde",
    align: "center",
    label: "PRODUCTCDE",
    field: "productcde",
    sortable: true,
  },
  {
    name: "mould",
    align: "center",
    label: "MOULDNO",
    field: "mould",
    sortable: true,
  },
  {
    name: "sbudate",
    align: "center",
    label: "SBUDATE",
    field: "sbu_date",
    sortable: true,
  },
  // {
  //   name: "printedDate",
  //   align: "center",
  //   label: "已打标签日期",
  //   field: "printedDate",
  //   sortable: true,
  // },
  {
    name: "goldPrintDate",
    align: "center",
    label: "金仓打印日期",
    field: "gold_print_date",
    sortable: true,
  },
  {
    name: "stonePrintDate",
    align: "center",
    label: "石仓打印日期",
    field: "stone_print_date",
    sortable: true,
  },
];

// HARDCODE
const rtrows = ref([
  // {
  //   no: 1,
  //   site: "4083",
  //   fgNum: "100000324880",
  //   orderType: "ZNCO00",
  //   orddate: "2023.03.10",
  //   duedat: "2023.03.30",
  //   designNum: "205001X",
  //   pono: "4083001180",
  //   podesc: "F255客單",
  //   typcde: "戒指",
  //   catcde: "DDDD",
  //   ordqty: 1,
  //   dept1: "C3S0000",
  //   dept11: "24镶石三组收发",
  //   datfrm1: "2023.03.25",
  //   gldcde: "GDD750W00",
  //   deptr: "18K金钻石戒指",
  //   ringType: "H13X",
  //   productcde: "RNP20211130006CS",
  //   mouldNo: 3,
  //   sbudate: "2023.03.09",
  //   printedDate: "2023.03.10",
  // },
]);

// Function: Search Function

const search = async () => {
  try {
    // const res = await getPrintLabelStatusReport(param.value)
    console.log(param.value, currentPage.value, rowsPerPage.value, sortCol.value);
    const res = await getPrintLabelStatusReport(
      param.value,
      currentPage.value,
      rowsPerPage.value,
      sortCol.value
    );
    console.log(res.data);
    if (res.data) {
      rtrows.value = res.data.results;
      total.value = res.data.count;
      max.value = Math.ceil(res.data.count / rowsPerPage.value);
    }
  } catch (error) {
    console.log(error);
  }
  showResult.value = true;
};
</script>

<style lang="scss" scoped>
.plsrPage {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  font-size: 1rem;
  @media (max-width: 480px) {
    font-size: 1rem;
  }
  .searchBox {
    background-color: #d8dff4;
    padding: 10px 10px 10px 10px;
    border-radius: 5px;
    width: 100%;
    .sbTitle {
      font-weight: bold;
      color: #1100bc;
    }
    .searchReqBox {
      background-color: #acbadf;
      padding: 10px 10px 10px 10px;
      font-size: 1.2rem;
      width: 100%;
      @media (max-width: 480px) {
        font-size: 1rem;
      }
      span {
        font-weight: bold;
        margin-right: 5px;
        color: #6727cf;
      }
      .searchItem {
        margin-top: 5px;
      }
    }
    .searchBtnBox {
      width: 100%;
      margin-top: 10px;
      .searchBtn {
        width: 30%;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
  .resultBox {
    width: 100%;
    margin-top: 10px;
    .exportBtnBox {
      margin-left: 10px;
      text-align: right;
      // padding-right: 10px;
      .exportBtn {
        font-size: 1rem;
        .exportSVG {
          margin-left: 5px;
        }
      }
    }
    .resultTable {
      margin-top: 10px;
    }
  }
}

::v-deep(.q-table__bottom) {
  justify-content: right !important;
}
</style>
